<template>
  <div id="login" class="login-container">
    <div class="login-main">
      <div class="login-wrapper">
        <div class="login-box-wrapper">
          <a-form
            :model="formInline"
            @finish="handleFinish"
            @finishFailed="handleFinishFailed"
            style="width: 100%"
          >
            <a-form-item style="text-align: center">
              <h2>欢迎登录</h2>
            </a-form-item>
            <a-form-item>
              <a-input
                v-model:value="formInline.user_name"
                placeholder="账号"
                :maxlength="20"
              >
                <template #prefix
                  ><UserOutlined style="color: rgba(0, 0, 0, 0.25)"
                /></template>
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input-password
                v-model:value="formInline.password"
                type="password"
                placeholder="密码"
              >
                <template #prefix
                  ><LockOutlined style="color: rgba(0, 0, 0, 0.25)"
                /></template>
              </a-input-password>
            </a-form-item>
            <a-form-item>
              <div class="remember-wrapper">
                <a-checkbox v-model:checked="formInline.resource"
                  >自动登录</a-checkbox
                >
              </div>
            </a-form-item>
            <a-form-item>
              <a-button
                style="width: 100%; height: 40px"
                type="primary"
                html-type="submit"
                :disabled="formInline.disabled"
              >
                立即登录
              </a-button>
            </a-form-item>
            <a-divider>其他登录方式</a-divider>
            <a-form-item style="text-align: center">
              <a-space size="large">
                <WeiboOutlined
                  style="font-size: 2em; cursor: pointer; color: #f50"
                />
                <QqOutlined
                  style="font-size: 2em; cursor: pointer; color: #2b92e4"
                />
                <GithubOutlined
                  style="font-size: 2em; cursor: pointer; color: #333"
                />
                <WechatOutlined
                  style="font-size: 2em; cursor: pointer; color: #4caf50"
                />
                <TaobaoCircleOutlined
                  style="font-size: 2em; cursor: pointer; color: #ff5722"
                />
              </a-space>
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div
        class="login-footer"
        v-if="app.layouts.showFooter"
        v-html="app.layouts.footerContent"
      />
    </div>
  </div>
</template>

<script>
import {
  UserOutlined,
  LockOutlined,
  WeiboOutlined,
  QqOutlined,
  GithubOutlined,
  WechatOutlined,
  TaobaoCircleOutlined,
} from "@ant-design/icons-vue";
import { useRouter, useRoute } from "vue-router";
import { defineComponent, reactive,watch } from "vue";
import { app, cache,notice } from "@/config";
import { login } from "@/api/user/Login";
import { getMenuAuth } from "@/config/utils/permission";
import store from "@/store";
export default defineComponent({
  components: {
    UserOutlined,
    LockOutlined,
    WeiboOutlined,
    QqOutlined,
    GithubOutlined,
    WechatOutlined,
    TaobaoCircleOutlined,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();

    let LoginFormData = cache("LoginFormData");
    let formInline = reactive({
      user_name:
        LoginFormData && LoginFormData.resource ? LoginFormData.user_name : "",
      password:
        LoginFormData && LoginFormData.resource ? LoginFormData.password : "",
      resource:
        LoginFormData && LoginFormData.resource
          ? LoginFormData.resource
          : false,
      disabled:true
    });
    formInline.disabled = formInline.user_name && formInline.password?false:true

    watch([() => formInline.user_name,() => formInline.password],([user_name,password])=>{
      formInline.disabled = user_name && password?false:true
    })

    // 验证登录
    let adminUserInfo = cache("adminUserInfo");
    if (!adminUserInfo || !adminUserInfo["Authorization-Token"]) {
      if(route.path != '/user/login'){
        // 跳转
        router.push({
          path: "/user/login",
        });
      }
    } else {
      let redirect = route.query.redirect?decodeURIComponent(route.query.redirect):'';
      let path = redirect ? redirect : "/";
      // 跳转后台首页
      router.push({
        path: path,
      });
    }

    const time = 1;
    const handleFinishFailed = () => {
      notice("error", "登录失败，请重试");
    };

    const handleFinish = () => {
      formInline.disabled = true
      login({
        user_name: formInline.user_name,
        password: formInline.password,
      }).then(function (res) {
        if(res.status != 200){
          notice("error", res.message,time);
          return false;
        }
        store.commit('saveAdminUserInfo', res.data)
        cache("LoginFormData", formInline);
        notice("success", "登录成功",time);
        // 获取当前用户菜单权限
        getMenuAuth()

        setTimeout(() => {
          // let redirect = route.query.redirect?decodeURIComponent(route.query.redirect):'';
          let redirect = '';
          let path = redirect ? redirect : "/";
          // 跳转后台首页
          router.push({
            path: path,
          });
        }, time * 1000);
      }).catch(()=>{
        formInline.disabled = false
      });
    };

    return {
      formInline,
      handleFinish,
      handleFinishFailed,
      app,
    };
  },
});
</script>

<style scoped>
.login-container {
  width: 100%;
  position: relative;
  background: #f0f2f5;
  background-attachment: fixed;
  background-repeat: no-repeat !important;
  background-size: cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.login-header {
  width: 100%;
  height: 64px;
  background-color: #ffffff;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  padding: 10px;
}
.login-header span {
  font-size: 25px;
  font-weight: 700;
}
.login-main {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
}
.login-wrapper {
  width: 90%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: row;
  height: 100%;
}
.login-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: row;
  text-align: center;
  color: #ffffff;
  margin-top: 40px;
}
.login-box-wrapper {
  background-color: #ffffff;
  padding: 40px;
  width: 440px;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0 1px 4px #00152914;
}

.remember-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}
.ant-input-affix-wrapper {
  padding: 8px 12px;
}
.ant-form-item {
  margin-bottom: 18px;
}
</style>